<template>
  <div>
    <BackgroundCanvas />
    <VScaleScreen
      ref="scale-screen"
      width="1920"
      height="1080"
      style="background-color: transparent"
      :full-screen="true"
    >
      <Header></Header>
      <main>
        <div class="left">
          <Box title="模块标题样式">
            <ECharts :option="options1" style="height: 250px" />
          </Box>
          <Box title="模块标题样式"></Box>
          <Box>
            <div style="display: flex">
              <ECharts :option="options3_1" style="height: 280px; margin-top: 20px; flex: 1" />
              <ECharts :option="options3_2" style="height: 280px; margin-top: 20px; flex: 1" />
              <ECharts :option="options3_3" style="height: 280px; margin-top: 20px; flex: 1" />
            </div>
          </Box>
        </div>
        <div class="middle"><Middle></Middle></div>
        <div class="right">
          <Box title="模块标题样式">
            <ECharts :option="options2" style="height: 250px" />
          </Box>
          <Box title="模块标题样式"></Box>
          <Box title="模块标题样式">
            <ECharts :option="options4" style="height: 250px" />
          </Box>
        </div>
      </main>
    </VScaleScreen>
  </div>
</template>

<script setup lang="ts">
import BackgroundCanvas from '@/components/backCanvas/indexView.vue'
import Header from '@/components/header/indexView.vue'
import VScaleScreen from 'v-scale-screen'
import Box from '@/components/box/indexView.vue'
import { createComponent } from 'echarts-for-vue'
import * as echarts from 'echarts'
import { h } from 'vue'
import { options2 } from '@/echartsConfig/options2'
import { options1 } from '@/echartsConfig/options1'
import { options4 } from '@/echartsConfig/options4'
import { options3_1, options3_2, options3_3 } from '@/echartsConfig/options3'
import Middle from '@/components/middle/indexView.vue'
const ECharts = createComponent({ echarts, h })
</script>

<style lang="scss">
body {
  background-image: url('./assets/bg.jpg');
  background-size: cover;
}
.div {
  height: 100px;
  width: 100%;
  background-color: red;
}

.div:nth-child(odd) {
  background-color: green;
}

main {
  display: flex;
  width: 100%;
  padding: 10px 10px 0 10px;
  .left,
  .right {
    width: 30%;
  }
  .middle {
    width: 40%;
  }
}
</style>
